import { useLocation } from 'react-router-dom'
import classNames from 'classnames'
import styles from './afterexam.module.scss'
import { Radio, Checkbox } from 'antd'

type questionObj = {
  id: number
  title: string
  options: { option: string; content: string; label: string; value: string }[]
  type: string | number
  serial: number
  choice: string | string[]
  detail: string
}

const AfterExam = () => {
  const routeLocation = useLocation()
  const list = routeLocation.state.questionList
  const score = routeLocation.state.score
  console.log(list)

  return (
    // <div>13</div>
    <div className={classNames(styles.box_detail)}>
      <div style={{ fontSize: '1.25rem', fontWeight: '700' }}>
        您的成绩是：<span style={{ color: 'var(--secondary-color)' }}>{score}</span>
      </div>
      {list &&
        list.map((currentQuestion: questionObj, index: number) => (
          <div key={index} className={classNames(styles.question_area)}>
            <div className={classNames(styles.title)}>
              {index + 1}. {currentQuestion?.title}
            </div>
            <div className={classNames(styles.options)}>
              {/* 单或判断 选项 */}
              {(currentQuestion?.type === '1' || currentQuestion?.type === '3') && (
                <Radio.Group
                  disabled
                  options={currentQuestion?.options}
                  style={{ display: 'flex', width: '100%', flexDirection: 'column', gap: '1.25rem' }}
                  value={currentQuestion.choice}
                  defaultValue={currentQuestion.choice}
                ></Radio.Group>
              )}
              {/* 多选题的选项 */}
              {currentQuestion?.type === '2' && (
                <Checkbox.Group
                  disabled
                  style={{ width: '100%', flexDirection: 'column', gap: '1.25rem' }}
                  options={currentQuestion?.options}
                  value={currentQuestion.choice as unknown as string[]}
                  defaultValue={currentQuestion.choice as string[]}
                ></Checkbox.Group>
              )}
              <div className={classNames(styles.detail)}>
                解释：
                {currentQuestion.detail}
              </div>
            </div>
          </div>
        ))}
    </div>

    // {questionList &&
    //   questionList.map((item, index) => (
    //   <div key={index}></div>
    // ))}
  )
}

export default AfterExam
